<template>
  <div>
    <!-- 新闻详情 -->
    <!-- {{ articleId.art_id }} -->
    <div>
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            size="20px"
            color="#666"
            @click="onClickLeft"
          />
        </template>
        <template #right>
          <van-icon
            name="ellipsis"
            size="20px"
            color="#666"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="big-box">
      <div class="box">
        <!-- 标题 -->
        <div class="title-head">{{ articleId.title }}</div>
        <!-- 时间/评论/阅读 -->
        <div class="title-around">
          <div>{{ getTime(articleId.pubdate) }} | {{ articleId.read_count }} 阅读 | {{ articleId.comm_count }} 评论</div>
        </div>

        <div class="secound-content">
          <!-- 头像 -->
          <img :src="articleId.aut_photo" class="photo"/>
          <!-- 作者 -->
          <span>{{ articleId.aut_name }}</span>
          <van-button
            round
            type="info"
            color="#7232dd"
            size="small"
          >
            +关注
          </van-button>
        </div>
        <!-- 内容 -->
        <div
          v-html="articleId.content"
        />
        <div>发布文章时间{{ getTime(articleId.pubdate) }}</div>

        <div class="color">
          <div
            ref="container"
            style="height: 10px;"
          >
            <van-sticky
              :container="container"
              :offset-top="46"
            >
              <van-button type="warning">全部评论 ({{ commentsList.length }}) ...点赞</van-button>
            </van-sticky>
            <van-cell
              v-for="(item,i) in commentsList"
              :key="i"
              :icon="item.aut_photo"
              :title="item.aut_name"
              :value="item.like_count"
              size="large"
              :label="item.content"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <van-goods-action>
        <van-search
          v-model="value"
          shape="round"
          placeholder="抢沙发"
        />
        <van-goods-action-icon
          icon="chat-o"
          text="评论"
          :badge="articleId.comm_count"
        />
        <van-goods-action-icon
          icon="good-job-o"
          text="点赞"
          dot
        />
        <van-goods-action-icon
          icon="like-o"
          text="收藏"
        />
        <van-goods-action-icon
          icon="share-o"
          text="分享"
        />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import moment from 'moment';
export default {
  name: 'ArticleId',
  data() {
    return {
      value: '',
      container: '',
    };
  },

  computed: {
    ...mapState('article', [
      'articleId'
    ]),
    ...mapState('comments', [
      'commentsList'
    ]),
  },

  methods: {
    ...mapActions('article', [
      'updatearticleId'
    ]),
    ...mapActions('comments', [
      'updateCommentsList'
    ]),
    getTime(time) {
      return moment(time).format('LL')
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },

  created() {
    // 路由实例
    // console.log(this.$router);
    // 当前路由信息
    // console.log(this.$route.query.q);
    // 请求当前设置loading
    this.updateCommentsList(this.$route.query.q)
    this.updatearticleId(this.$route.query.q);
  },
}

</script>
<style lang="less" scoped>
.big-box{
  margin: 0 16px;

  .box{
    width: 100%;
    height: calc(100vh - 100px);
    overflow: auto;
  }

  .title-head{
  font-size: 26px;
  }

  .title-around{
    font-size: 13px;
    color: #999;
  }

  .secound-content{
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .photo{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
  }
}

.color{
  margin-top: 8px;
  width: 100%;
  height: 1500px;
}
</style>
